<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门 methods watch computed 双向绑定</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 挂载点，模板，实例之间的关 -->
		<div id="root">
			姓：<input v-model="firstName" />
			名： <input v-model="lastName" />
			<div v-text="fullName"></div>
			<div v-text="'改变次数:'+count"></div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					firstName: "",
					lastName: "",
					count: 0
				},
				computed: {
					fullName() {
						return this.firstName + this.lastName;
					}
				},
				watch: {
					// firstName() {
					// 	this.count++;
					// },
					// lastName() {
					// 	this.count++;
					// },
					fullName() {
						this.count++;
					}
				}
			})
		</script>
	</body>
</html>
